<template>
    <div id='login'>
       <el-card class='e_c'>
           <div slot="header">
               <span>注册</span>
           </div>
        <!-- 用户名目录 -->
        <el-form ref='formLogin' :model="formLoginData"   :rules='rules' label-width="80px">
            <el-form-item label="用户名" prop='username'>
                <el-input v-model="formLoginData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop='password'>
                <el-input type="password" v-model="formLoginData.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop='password2'>
                <el-input type="password" v-model="formLoginData.password2"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop='e-mail'>
                <el-input type="email" v-model="formLoginData.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop='phone'>
                <el-input type="text" v-model="formLoginData.phone"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="regist" class='login_l'>注册</el-button>
                <router-link to='/login' class='login_r'>已有账号</router-link>
            </el-form-item>
        </el-form>
     </el-card>
     {{formLoginData}}
    </div>
</template>
<script>
export default {
  data() {
    //用户名验证
    let validUsername = (rule, value, callback) => {
      let regx = /^[a-zA-Z]\w{3,17}$/;
      if (!regx.test(value)) {
        callback(new Error("用户名非法"));
      } else {
        callback();
      }
    };
    //密码验证
    let validPassword = (rule, value, callback) => {
      let regx = /^.{6,18}$/;
      if (!regx.test(value)) {
        callback(new Error("密码错误"));
      } else {
        callback();
      }
    };
    //重复密码验证
    let validPassword2 = (rule, value, callback) => {
        if(value.trim()===''){
            callback(new Error('不能为空'))
        }else if (value!== this.formLoginData.password) {
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    return {
      formLoginData: {
        username: "",
        password: "",
        password2: "",
        email: "",
        phone: ""
      },
      // 验证规则
      rules: {
        username: [{ validator: validUsername, trigger: "change" }],
        password: [{ validator: validPassword, trigger: "change" }],
        password2: [{ validator: validPassword2, trigger: "change" }]
      }
    };
  },
  created() {
    this.getUsersList();
  },
  methods: {
    // 注册验证
    regist() {
      this.$refs.formLogin.validate(valid => {
        if (!valid) {
          return;
        }
        this.$http.post("/users/add", this.$qs.stringify(this.formLoginData))
          .then(result => {
            this.$router.push("/login");
          });
      });
    },
    //列表获取
    getUsersList() {
      this.$http.get("/users/list").then(result => {
        console.log(result.data.data);
      });
    }
  }
};
</script>
<style>
a {
  text-decoration: none;
}
.e_c {
  margin: 0 auto;
  width: 400px;
}
.login_r {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  padding: 0 20px;
  margin-left: 60px;
}
.login_l {
  margin-left: 26px;
}
</style>

